<template>
  <div id="interface-list-form">
    <el-scrollbar class="scroll-view">

    <!-- <el-row>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    </el-row> -->

      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【1】获取账号地址</span>
              <el-button style="float: right;" type="primary" @click="getAccountEthAddress">执行</el-button>
          </div>
          <div class="text item">
              {{ accountEthAddress }}
          </div>
      </el-card>

      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【2】世界中马的总数</span>
              <el-button style="float: right;" type="primary" @click="getWorldHorseCounts">执行</el-button>
          </div>
          <div class="text item">
              {{ worldHorseCounts }}
          </div>
      </el-card>


      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【3】创建马</span>
              <el-button style="float: right;" type="primary" @click="createHorse">执行</el-button>
          </div>
          <div class="text item">
              {{ aAttributesOfHorse }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【4】查询余额</span>
              <el-button style="float: right;" type="primary" @click="getBalance">执行</el-button>
          </div>
          <div class="text item">
              {{ userBalance }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【5】挂牌</span>
              <el-button style="float: right;" type="primary" @click="onSell">执行</el-button>
          </div>
          <div class="text item">
              {{ sellEvent }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【6】在售的马</span>
              <el-button style="float: right;" type="primary" @click="onSelling">GET</el-button>
          </div>
          <div class="text item">
              {{ sellingHorses }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【7】出售详情</span>
              <el-button style="float: right;" type="primary" @click="onAuctionDetail">GET</el-button>
          </div>
          <div class="text item">
              {{ auctionDetail }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【8】取消挂牌</span>
              <el-button style="float: right;" type="primary" @click="onCancelAuction">POST</el-button>
          </div>
          <div class="text item">
              {{ cancelEvent }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【9】当前竞拍价格</span>
              <el-button style="float: right;" type="primary" @click="onGetCurrentPrice">GET</el-button>
          </div>
          <div class="text item">
              {{ getCurrentPrice }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【10】出价</span>
              <el-button style="float: right;" type="primary" @click="onPostBid">POST</el-button>
          </div>
          <div class="text item">
              {{ postBid }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【11】管理员设置赌注</span>
              <el-button style="float: right;" type="primary" @click="onSetWager">POST</el-button>
          </div>
          <div class="text item">
              {{ postSetWager }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【12】获取赌注</span>
              <el-button style="float: right;" type="primary" @click="onGetWager">GET</el-button>
          </div>
          <div class="text item">
              {{ getWager }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【13】设置随机数种子</span>
              <el-button style="float: right;" type="primary" @click="onSetSeeds">POST</el-button>
          </div>
          <div class="text item">
              {{ postSetSeeds }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【14】获取随机数种子</span>
              <el-button style="float: right;" type="primary" @click="onGetSeeds">GET</el-button>
          </div>
          <div class="text item">
              {{ getSeeds }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【15】获取合约余额</span>
              <el-button style="float: right;" type="primary" @click="onGetContractBalance">GET</el-button>
          </div>
          <div class="text item">
              {{ getContractBalance }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【16】管理员设置HSD兑率</span>
              <el-button style="float: right;" type="primary" @click="onSetHsdCut">POST</el-button>
          </div>
          <div class="text item">
              {{postSetHsdCut}}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【17】查询HSD兑率</span>
              <el-button style="float: right;" type="primary" @click="onGetHsdCut">GET</el-button>
          </div>
          <div class="text item">
              {{ getHsdCut }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【18】发起挑战</span>
              <el-button style="float: right;" type="primary" @click="onChallenge">POST</el-button>
          </div>
          <div class="text item">
              {{ challengeResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【19】获取比赛详情</span>
              <el-button style="float: right;" type="primary" @click="onGetMatchDetail">GET</el-button>
          </div>
          <div class="text item">
              {{ getMatchDetailResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【20】获取比赛总数</span>
              <el-button style="float: right;" type="primary" @click="onGetMatchCount">GET</el-button>
          </div>
          <div class="text item">
              {{ getMatchCountResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【21】购买筹码</span>
              <el-button style="float: right;" type="primary" @click="onBuyHsd">POST</el-button>
          </div>
          <div class="text item">
              {{ buyHsdResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【22】卖出筹码</span>
              <el-button style="float: right;" type="primary" @click="onSellHsd">POST</el-button>
          </div>
          <div class="text item">
              {{ sellHsdResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【23】获取筹码余额</span>
              <el-button style="float: right;" type="primary" @click="onGetHsdBalance">GET</el-button>
          </div>
          <div class="text item">
              {{ getHsdBalanceResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【24】接受挑战</span>
              <el-button style="float: right;" type="primary" @click="onAcceptChallenge">POST</el-button>
          </div>
          <div class="text item">
              {{ acceptChallengeResult }}
          </div>
      </el-card>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>【25】获取比赛结果</span>
              <el-button style="float: right;" type="primary" @click="onGetMatchResult">GET</el-button>
          </div>
          <div class="text item">
              {{ getMatchResultResult }}
          </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【26】deprecated-获取无主的马</span>
          <el-button style="float: right;" type="primary" @click="onOwnerlessHorses">GET</el-button>
        </div>
        <div class="text item">
          {{ ownerlessHorsesResult }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【27】deprecated--获取合约地址</span>
          <el-button style="float: right;" type="primary" @click="">GET</el-button>
        </div>
        <div class="text item">
          {{ getContractAddressResult }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【28】用户的马</span>
          <el-button style="float: right;" type="primary" @click="onTokensOfOwner">GET</el-button>
        </div>
        <div class="text item">
          {{ tokensOfOwnerResult }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【29】马详情</span>
          <el-button style="float: right;" type="primary" @click="onGetHorse">GET</el-button>
        </div>
        <div class="text item">
          {{ getHorseResult }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【30】获取被挑战的比赛</span>
          <el-button style="float: right;" type="primary" @click="onConcernedChallenges">GET</el-button>
        </div>
        <div class="text item">
          {{ concernedChallengesResult }}
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>【31】获取马详情和是否挂牌</span>
          <el-button style="float: right;" type="primary" @click="onGetHorseWithAuction">GET</el-button>
        </div>
        <div class="text item">
          {{ getHorseWithAuctionResult }}
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'interface-list',
    computed: {
      isDAppReady: function () {
        return this.$store.state.isDAppReady
      }
    },
    data: function () {
      return {
        user: this.$store.state.user,

        // 接口 1
        accountEthAddress: null,
        worldHorseCounts: null,
        aAttributesOfHorse: null,
        userBalance: null,
        sellEvent: null,
        sellingHorses: null,
        auctionDetail: null,
        cancelEvent: null,
        getCurrentPrice: null,
        postBid: null,
        postSetWager: null,
        getWager: null,
        postSetSeeds: null,
        getSeeds: null,
        getContractBalance: null,
        postSetHsdCut: null,
        getHsdCut: null,
        challengeResult: null,
        getMatchDetailResult: null,
        getMatchCountResult: null,
        buyHsdResult: null,
        sellHsdResult: null,
        getHsdBalanceResult: null,
        acceptChallengeResult: null,
        getMatchResultResult: null,
        ownerlessHorsesResult: null,
        getContractAddressResult: null,
        tokensOfOwnerResult: null,
        getHorseResult: null,
        concernedChallengesResult: null,
        getHorseWithAuctionResult: null
      }
    },
    methods: {
      test () {
        return false
      },
      // 接口 1
      getAccountEthAddress () {
        this.$root.callMatch({
          params: null,
          methodName: API.GET_ACCOUNTS,
          methodType: 'GET',
          success: (data) => {
            console.log('account = ' + data)
            this.accountEthAddress = data
          },
          failure: null
        })
      },
      getWorldHorseCounts () {
        this.$root.callMatch({
          params: null,
          methodName: API.TOTAL_SUPPLY,
          methodType: 'GET',
          success: data => {
            console.log('horse counts = ' + JSON.stringify(data))
            this.worldHorseCounts = data
          },
          failure: null
        })
      },
      createHorse () {
        this.$root.callMatch({
          // isProtected: false,
          params: '124',
          methodName: API.CREATE_HORSE,
          methodType: 'POST',
          event: 'Birth',
          success: data => {
            console.log('horse create = ' + JSON.stringify(data))
            this.aAttributesOfHorse = data
          },
          failure: null
        })
      },
      getBalance () {
        this.$root.callMatch({
          isProtected: true,
          params: null,
          methodName: API.BALANCE_OF,
          methodType: 'GET',
          success: data => {
            console.log('balance = ' + JSON.stringify(data))
            this.userBalance = data
          },
          failure: null
        })
      },
      onSell () {
        this.$root.callMatch({
          isProtected: false,
          params: [1, 10000000000000000, 1000000000000000000, 36000],
          methodName: API.SELL,
          methodType: 'POST',
          event: 'Sell',
          success: data => {
            console.log('sell = ' + JSON.stringify(data))
            this.sellEvent = data
          },
          failure: null
        })
      },
      onSelling () {
        this.$root.callMatch({
          isProtected: false,
          params: null,
          methodName: API.SELLING,
          methodType: 'GET',
          success: data => {
            console.log('selling = ' + JSON.stringify(data))
            this.sellingHorses = data
          },
          failure: null
        })
      },
      onAuctionDetail () {
        this.$root.callMatch({
          isProtected: false,
          // token_id
          params: 1,
          methodName: API.GET_AUCTION,
          methodType: 'GET',
          success: data => {
            console.log('selling = ' + JSON.stringify(data))
            this.auctionDetail = data
          },
          failure: null
        })
      },
      onCancelAuction () {
        this.$root.callMatch({
          isProtected: false,
          // token_id
          params: 1,
          methodName: API.CANCEL_AUCTION,
          methodType: 'POST',
          event: 'cancelSell',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.cancelEvent = data
          },
          failure: null
        })
      },
      onGetCurrentPrice () {
        this.$root.callMatch({
          isProtected: false,
          // token_id
          params: 1,
          methodName: API.GET_CURRENT_PRICE,
          methodType: 'GET',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.getCurrentPrice = data
          },
          failure: null
        })
      },
      onPostBid () {
        this.$root.callMatch({
          isProtected: false,
          // 10000000000000000 = 0.01 eth
          // tokenId
          params: 1,
          methodName: API.BID,
          methodType: 'POST',
          amount: 10000000000000000,
          event: 'Transfer',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.postBid = data
          },
          failure: null
        })
      },
      onSetWager () {
        this.$root.callMatch({
          isProtected: false,
          // 100000000000000000 wei = 0.1 ether
          params: 1,
          methodName: API.SET_WAGER,
          methodType: 'POST',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.postSetWager = data
          },
          failure: null
        })
      },
      onGetWager () {
        this.$root.callMatch({
          isProtected: false,
          // 100000000000000000 wei = 0.1 ether
          methodName: API.GET_WAGER,
          methodType: 'GET',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.getWager = data
          },
          failure: null
        })
      },
      onSetSeeds () {
        this.$root.callMatch({
          isProtected: false,
          params: [[1, 2, 3, 4, 5, 5, 4, 3, 2, 1]],
          methodName: API.SET_SEEDS,
          methodType: 'POST',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.postSetSeeds = data
          },
          failure: null
        })
      },
      onGetSeeds () {
        this.$root.callMatch({
          isProtected: false,
          methodName: API.GET_SEEDS,
          methodType: 'GET',
          success: data => {
            console.log('cancel = ' + JSON.stringify(data))
            this.getSeeds = data
          },
          failure: null
        })
      },
      onGetContractBalance () {
        this.$root.callMatch({
          isProtected: false,
          methodName: API.GET_CONTRACT_BALANCE,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            // 100000000000000000 wei = 0.1 ether
            this.getContractBalance = data
          },
          failure: null
        })
      },
      onSetHsdCut () {
        this.$root.callMatch({
          isProtected: false,
          // 100000000000000000 wei = 0.1 ether
          params: 1000000000000000,
          methodName: API.SET_HSD_CUT,
          methodType: 'POST',
          success: data => {
            console.log(JSON.stringify(data))
            this.postSetHsdCut = data
          },
          failure: null
        })
      },
      onGetHsdCut () {
        this.$root.callMatch({
          isProtected: false,
          methodName: API.GET_HSD_CUT,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getHsdCut = data
          },
          failure: null
        })
      },
      onChallenge () {
        this.$root.callMatch({
          isProtected: false,
          params: [0, 1, 0x35c85c5E8953634efe44c24a7775325da5f8e8A8],
          methodName: API.CHALLENGE,
          methodType: 'POST',
          event: 'Challenge',
          success: data => {
            console.log(JSON.stringify(data))
            this.challengeResult = data
          },
          failure: null
        })
      },
      onGetMatchDetail () {
        this.$root.callMatch({
          isProtected: false,
          params: 0,
          methodName: API.GET_MATCH_DETAIL,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getMatchDetailResult = data
          },
          failure: null
        })
      },
      onGetMatchCount () {
        this.$root.callMatch({
          isProtected: false,
          params: 0,
          methodName: API.GET_MATCH_COUNT,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getMatchCountResult = data
          },
          failure: null
        })
      },
      onBuyHsd () {
        this.$root.callMatch({
          isProtected: true,
          methodName: API.BUY_HSD,
          amount: 1000000000000000 * 100,
          methodType: 'POST',
          event: 'BuyHsd',
          success: data => {
            console.log(JSON.stringify(data))
            this.buyHsdResult = data
          },
          failure: null
        })
      },
      onSellHsd () {
        this.$root.callMatch({
          isProtected: false,
          params: 100,
          methodName: API.SELL_HSD,
          methodType: 'POST',
          event: 'SellHsd',
          success: data => {
            console.log(JSON.stringify(data))
            this.sellHsdResult = data
          },
          failure: null
        })
      },
      onGetHsdBalance () {
        this.$root.callMatch({
          isProtected: true,
          methodName: API.GET_HSD_BALANCE,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getHsdBalanceResult = data
          },
          failure: null
        })
      },
      onAcceptChallenge () {
        this.$root.callMatch({
          isProtected: false,
          params: 0,
          methodName: API.ACCEPT_CHALLENGE,
          methodType: 'POST',
          event: 'MatchFinish',
          success: data => {
            console.log(JSON.stringify(data))
            this.acceptChallengeResult = data
          },
          failure: null
        })
      },
      onGetMatchResult () {
        this.$root.callMatch({
          isProtected: false,
          params: 0,
          methodName: API.GET_MATCH_RESULT,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getMatchResultResult = data
          },
          failure: null
        })
      },
      onOwnerlessHorses () {
        this.$root.callMatch({
          isProtected: false,
          methodName: API.OWNERLESS_HORSES,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.ownerlessHorsesResult = data
          },
          failure: null
        })
      },
      onTokensOfOwner () {
        this.$root.callMatch({
          isProtected: true,
          methodName: API.TOKENS_OF_OWNER,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getContractAddressResult = data
          },
          failure: null
        })
      },
      onGetHorse () {
        this.$root.callMatch({
          isProtected: false,
          params: 5,
          methodName: API.GET_HORSE,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getHorseResult = data
          },
          failure: null
        })
      },
      onConcernedChallenges () {
        this.$root.callMatch({
          isProtected: true,
          methodName: API.CONCERNED_CHALLENGES,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.concernedChallengesResult = data
          },
          failure: null
        })
      },
      onGetHorseWithAuction () {
        this.$root.callMatch({
          isProtected: true,
          params: 1,
          methodName: API.GET_HORSE_WITH_AUCTION,
          methodType: 'GET',
          success: data => {
            console.log(JSON.stringify(data))
            this.getHorseWithAuctionResult = data
          },
          failure: null
        })
      }
    }
  }

//   import { mapActions } from 'vuex'
  import { API } from '../../util/constants'
// import blockchainManager from '../../js/BlockchainManager'
</script>

<style scoped>
  #interface-list-form {
    width: 100%;
    height: 500px;
    position: relative;
    top: 78px;
  }

  h3 {
    width: 100px;
    margin: auto;
    margin-bottom: 20px;
  }

  .wrapper {
    width: 460px;
    margin: auto;
  }

  .column {
    width: 300px;
    display: inline-block;
  }

  .row {
    margin-top: 20px;
    font-size: 14px;
    width: 300px;
    height: 40px;
    display: block;
  }

  .scroll-view {
      height: 100%;
  }

    .box-card {
        margin-bottom: 12px;
    }
</style>
